<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:pe="http://primefaces.org/ui/extensions"
	xmlns:p="http://primefaces.org/ui">
<ui:composition>

	<p:growl id="growlLogin" showDetail="true" life="3000" />

	<p:dialog header="Login" widgetVar="dlgLogin" showEffect="clip"
		hideEffect="clip" modal="true" resizable="false" closable="false">
		<h:panelGrid columns="2" cellpadding="5">
			<h:outputLabel for="username" value="Username:" />
			<p:inputText value="#{loginBean.username}" id="username"	required="true" label="username" />

			<h:outputLabel for="password" value="Password:" />
			<h:inputSecret value="#{loginBean.password}" id="password"
				required="true" label="password" />

		</h:panelGrid>

		<f:facet name="footer">
			<h:panelGroup layout="block" style="text-align: right; padding: 2px;">

				<h:panelGroup layout="block"
					style="text-align:center; padding-bottom:8px; font-style:italic;">
					<h:outputText value="Ingrese usuario y contraseña." />
				</h:panelGroup>

				<p:commandButton type="button" value="Cerrar"	onclick="dlgLogin.hide()" />
				<p:commandButton  value="Login" update="growlLogin"	actionListener="#{loginBean.login}"
					oncomplete="handleLoginRequest(xhr, status, args)" />
			</h:panelGroup>
		</f:facet>
	</p:dialog>

	<script type="text/javascript">  
    function handleLoginRequest(xhr, status, args) {  
        if(args.validationFailed || !args.loggedIn) {  
        	dlgLogin.jq.effect("shake", { times:5 }, 100);  
        }   
        else {  
        	dlgLogin.hide();  
            $('#loginLink').fadeOut();  
        }  
    }  
</script>
</ui:composition>
</html>
